<template>
    <el-page-header title=" " @back="doCollapse" class="m-bottom-5">
        <template #content>
            <div class="flex a-center">
                <div class="f-shrink">{{ currentRoute.meta.title }}</div>
                <slot name="left"></slot>
            </div>
        </template>
        <template #icon>
            <MetaIcon
                size="24"
                :name="menuCollapse ? 'Expand' : 'Fold'"
            ></MetaIcon>
        </template>
        <template #extra>
            <div class="flex a-center">
                <el-button
                    v-if="props.isShowFilter"
                    size="small"
                    type="primary"
                    text
                    @click="changFormStatus"
                >
                    <MetaIcon name="Filter"></MetaIcon><span>筛选</span>
                </el-button>
            </div>
        </template>
    </el-page-header>
</template>

<script setup>
import MetaIcon from '@/components/MetaIcon/index.vue'
import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
import { inject } from 'vue'
import { useRoute } from 'vue-router'
const changFormStatus = inject('changFormStatus')
const currentRoute = useRoute()

const configStore = useConfigStore()
const { menuCollapse } = storeToRefs(configStore)

const props = defineProps({
    isShowFilter: {
        type: Boolean,
        default: true
    }
})

const doCollapse = () => {
    menuCollapse.value = !menuCollapse.value
}
</script>

<style></style>
